<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            perspective: 800px;
            /* 
             perspective意思是景深，是相机摄影光学里面的一个概念
             这里就简单随便了解一点用在css上的特性，会和摄影的景深有所区别
             默认值：none 
             要填一个比0大的像素值，不可以为0px
             
             设置了景深，就有了空间感，有了z轴上纵深的效果，更加显示立体效果
             设置了景深，就是设置了一个空间的视角
             必须设置在变换元素的父级（祖先元素），设置在body偷个懒
             

             对于translatez(100px)的元素，景深越大，元素呈现越小，反之元素呈现越大
             对于translatez(-100px)的元素，景深越大，元素呈现越大，反之元素呈现越小
             对于translatez(0px)的元素，元素呈现大小不会随景深改变

             针对这些现象得出结论：
             屏幕是一个平面，对于三维变换的元素，它脱离了屏幕这个平面
             所以perspective设置的视角其实是一个点光源
             对于三维变换立体的元素，我们看到的屏幕上的呈现，是元素在屏幕上的投影
             不设置景深，是没有立体效果的
             所以二维变换的元素不受景深的影响
            */

            perspective-origin: 300px 300px;
            /* 
             空间视角的位置，观察物体的角度，视角位置不一样，呈现的效果也会不一样
             默认值：center center
            */
        }

        div {
            position: absolute;
            left: 200px;
            top: 200px;
            width: 200px;
            height: 200px;
            background-image: url("./pic1.jpeg");
            background-size: cover;

            transform: translateX(100px);
            transform: translateX(-50%);
            /* 
             沿x轴相对自己原来位置平移100px
             沿x轴平移和原点位置没啥关系，因为不管原点设在哪，都是向右平移
             设置为负值则会反向平移
             百分数相对的是自己自身元素宽高的百分比
             百分数用在translateZ()上没意义啊
            */


            transform: translateZ(100px);
            /* 
             不加perspective，z轴垂直屏幕，所以看不出变化，但是确实是平移了的
             加上perspective，有空间效果就能看到效果了
            */

            transform: translateZ(100px) rotateY(90deg);
            /* 
             translate 也会带着坐标轴一起平移
             先translateZ(100px)，原点以及x轴y轴都垂直屏幕平移了，移到了屏幕的上方
            */

            transform: rotateY(90deg) translateZ(100px);
            /* 
             先旋转，在平移，旋转之后的z轴是向右的，会看到平移效果
            */

            transform: translateZ(100px);
            transform: translateZ(-100px);
            /* 
             沿z轴正方向平移的距离不能大于景深设置的800px，大于800px会导致元素看不到
             然后沿z轴正方向平移的值越大，显示在屏幕上的元素也越大
             沿z轴反方向平移，平移的距离越远（负数的绝对值越大），呈现的元素越小。

            */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>